<template>
  <div class="editDialog">
    <el-dialog
      :visible.sync="editData.dialogVisible"
      :destroy-on-close="true"
      width="30%"
      :before-close="handleClose"
    >
      <template slot="title">
        <div style="font-weight: bold">
          {{ editData.type === "add" ? "新建样本库" : "修改样本库" }}
        </div>
      </template>
      <el-form ref="userIdForm" :model="form" :rules="formRules">
        <el-form-item
          prop="yangbenkmc"
          label="样本库名称："
          label-width="120px"
        >
          <el-input
            v-model="form.yangbenkmc"
            style="width: 80%"
            auto-complete="off"
            placeholder="请输入样本库名称"
          />
        </el-form-item>
        <el-form-item prop="yangbenlx" label="样本库类型：" label-width="120px">
          <el-select v-model="form.yangbenlx" style="width: 80%">
            <el-option
              v-for="item in sampleTypeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="jiankusm" label="备注：" label-width="120px">
          <el-input
            v-model="form.jiankusm"
            style="width: 80%"
            auto-complete="off"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { bankAdd, bankEdit } from "@/api/sampleBank";

export default {
  name: "EditSample",
  props: ["editData", "sampleTypeList"],
  data() {
    return {
      form: {
        yangbenkmc: "",
        yangbenlx: "",
        jiankusm: ""
      },
      formRules: {
        yangbenkmc: [
          {
            required: true,
            message: "样本库名称不能为空",
            trigger: ["blur", "change"]
          }
        ],
        yangbenlx: [
          {
            required: true,
            message: "样本库类型不能为空",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  watch: {
    editData: {
      handler: function(val) {
        console.log(val, "------val");
        if (val.type === "edit") {
          this.form = val.row;
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    submit() {
      this.$refs.userIdForm.validate(valid => {
        if (valid) {
          this.editData.dialogVisible = false;
          // 请求api
          const params = {
            ...this.form
          };
          const apiName =
            this.editData.type === "add" ? bankAdd(params) : bankEdit(params);
          apiName.then(res => {
            this.$message.success("操作成功");
            this.handleClose();
            this.$parent.getBankList();   // DLJ APPEND BY 20210907
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.$refs.userIdForm.resetFields();
      this.form = {};
      this.editData.row={}
      this.editData.dialogVisible = false;
    }
  }
};
</script>

<style lang="less" scoped>
.editDialog {
  font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
  .el-form {
    /deep/ .el-form-item .el-form-item__label {
      font-weight: normal;
      font-size: 14px;
    }
  }
  .el-select,
  .el-input {
    /deep/ .el-input__inner {
      color: #303133;
      font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
      background-color: #aaadb129;
    }
  }

  .el-button {
    padding: 10px 18px;
    font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
    color: #303133;
    font-size: 14px;
    font-weight: 700;

    &:hover {
      color: #4f74c4;
      border-color: #4f74c4;
      background: white;
    }

    &:focus {
      color: #1c3991;
      border-color: #1c3991;
      background: white;
    }

    &--danger {
      color: white;
      background: #f55656;
      &:hover {
        color: #fff;
        background-color: #ff8683;
        border-color: #ff8683;
      }
      &:focus {
        color: #fff;
        background-color: #cf3e43;
        border-color: #cf3e43;
      }
    }

    &--primary {
      color: white;
      background-color: #2d54b8;
      border-color: #2d54b8;

      &:hover {
        background: #4f74c4;
        border-color: #4f74c4;
        color: white;
      }

      &:focus {
        background: #1c3991;
        border-color: #1c3991;
        color: white;
      }
    }
  }
}
</style>
